<div
  (mouseenter)="setPopoverPositionByScreen()"
  class="po-helper-container po-helper-target"
  [attr.p-size]="this.size()"
  #target
  [attr.tabindex]="disabled() ? null : 0"
  role="button"
  [attr.aria-label]="ariaLabel()"
  [attr.aria-haspopup]="'dialog'"
  [attr.aria-expanded]="!popover.isHidden"
  [attr.aria-controls]="'popover-content-' + id"
  [attr.aria-describedby]="!popover.isHidden ? 'popover-content-' + id : null"
  [class.po-helper-disabled]="disabled()"
  (keydown)="onKeyDown($event)"
  (click)="emitClick($event); popover.ensurePopoverPosition()"
>
  <po-icon [p-icon]="helper()?.type === 'info' ? 'ICON_INFO' : 'ICON_HELP'"></po-icon>
  <po-popover
    (click)="$event.stopPropagation()"
    #popover
    [p-position]="popoverPosition"
    [p-target]="target"
    [p-title]="helper()?.title"
    [p-append-in-body]="appendBox()"
    p-custom-classes="po-helper-popover"
  >
    <div [id]="'popover-content-' + id" role="dialog" aria-modal="false" tabindex="-1">
      {{ helper()?.content }}
      @if (helper()?.type === 'help' && helper()?.footerAction) {
        <po-divider></po-divider>
        <po-link
          class="po-helper-footer-action-link"
          (keydown.enter)="$event.stopPropagation()"
          (keydown.space)="$event.stopPropagation()"
          (p-action)="helper()?.footerAction?.action()"
          [p-label]="helper()?.footerAction?.label"
        >
        </po-link>
      }
    </div>
  </po-popover>
</div>
